<template>
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <!-- error-text="请求失败，点击重新加载" -->
    
    <!-- <van-cell v-for="item in list" :key="item.id" :title="item.title" ></van-cell> -->

    <van-cell-group v-for="item in list" :key="item.id">
      <van-cell :clickable="true" @click="Fn(item.id)">
        <!-- <div> -->
        <!-- <van-cell title="单元格" value="内容" /> -->
        <div slot="default" class="box-img">
          <img class="special_img" :src="item.scene_pic_url" alt="" />
        </div>
        <!-- <van-cell title="单元格" value="内容" label="描述信息" /> -->
        <div slot="default" class="text-con">
          <p class="title01">{{ item.title }}</p>
          <p class="title02">{{ item.subtitle }}</p>
          <p class="price">${{ item.price_info }}</p>
          <!-- </div> -->
        </div>
      </van-cell>
    </van-cell-group>
  </van-list>
</template>

<script>
import { specialList } from "@/api/special";
export default {
  name: "ListIndex",
  data() {
    return {
      listItemId: null,
      listInfo: {
        // 发送的数据
        page: 1, //当前页
        size: 5, // 每一页的数据条数
      },
      count: 0, // 数据总条数
      currentPage: 1, //当前页码
      totalPages: 0, // 总页码
      list: [], // 每次返回的总数据
      loading: false, // 加载状态
      finished: false, // 没有新的数据了 就会为true
    };
  },
  created() {
    this.onLoad();
  },
  methods: {
    async onLoad() {
      this.loading = true; //正在加载
      //   this.$toast.loading("正在加载");
      //   if(Math.random()>0.5){

      //       JSON.parse("abac");
      //   }

      try {
        const { data } = await specialList(this.listInfo);
        // console.log(data.data.totalPages);
        this.count = data.data.count; //总页数
        this.currentPage = data.data.currentPage; //当前页码
        this.totalPages = data.data.totalPages; // 总页数;

        this.list = [...this.list, ...data.data.data];
        this.listInfo.page++;
        // 如果当前请求的数据为空数组 那么  加载结束
        if (data.data.data.length == 0) {
          this.finished = true;
        }
      } catch (err) {
        console.log(err.message);
      }

      this.loading = false; //加载结束;
    },
    Fn(id) {
      //  this.listItemId = id;
      this.$emit("getItemID", id);
    },
  },
};
</script>

<style scoped lang="scss">
.box-img {
  box-sizing: border-box;
  //   padding: 20px 40px;
}
.special_img {
  width: 100%;
}
.text-con {
  text-align: center;
  font-size: 32px;
  color: #666;
  .title01 {
    font-size: 40px;
  }
  .title02 {
    font-size: 28px;
    color: #aaa;
    padding: 20px;
  }
  .price {
    color: #c00000;
  }
}
</style>
